<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--应用占满浏览器，适应于设备分辨率-->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>空间信息可视化Demo</title>
    <script src="libs/jquery/jquery.js" type="text/javascript"></script>
    <script src="libs/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <!--导入CSS样式 -->
    <style>
        /*tool.css里面是id选择器*/
        @import url(css/tool.css);
        /*plugin.css里是样式选择器*/
        @import url(css/plugin.css);
        @import url(libs/Cesium/Widgets/widgets.css);
        @import url(libs/bootstrap/bootstrap.min.css);
    </style>
</head>
<body>
<!--加载地图-->
<div id="map" class="fullSize"></div>
<!--导航栏-->
<div class="map-nav">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!--复位功能-->
            <div class="navbar-header">
                <a class="navbar-brand" href="#" id="mapReset">复位</a>
            </div>
            <!--图层切换模块-->
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="layerChange">
                            图层切换<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="loadSatelliteMap">卫星地球</a></li>
                            <li><a href="#" id="loadDigitalMap">电子地球</a></li>
                            <li class="divider"></li>
                            <li><a href="#" id="loadBeijingDigitalMap">北京市电子地图</a></li>
                            <li><a href="#" id="loadBeijingSatelliteMap">北京市卫星地图</a></li>
                            <li class="divider"></li>
                            <li><a href="#" id="loadSuzhouDigitalMap">苏州市电子地图</a></li>
                            <li><a href="#" id="loadSuzhouSatelliteMap">苏州市卫星地图</a></li>
                            <li class="divider"></li>
                            <li><a href="#" id="clearAllMap">清除图层</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--标绘模块-->
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="plotModule">
                            标绘<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="pointPlot">点</a></li>
                            <li><a href="#" id="polylinePlot">线</a></li>
                            <li><a href="#" id="polygonPlot">面</a></li>
                            <li><a href="#" id="rectanglePlot">矩形</a></li>
                            <li><a href="#" id="ellipsePlot">椭圆</a></li>
                            <li class="divider"></li>
                            <li><a href="#" id="clearPlot">清除标绘</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--量测模块-->
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="measureModule">
                            量测<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="measureDistance">距离</a></li>
                            <li><a href="#" id="measureAngle">角度</a></li>
                            <li><a href="#" id="measureArea">面积</a></li>
                            <li class="divider"></li>
                            <li><a href="#" id="clearMeasureData">清除量测数据</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--矢量加载模块-->
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="vectorModule">
                            矢量数据加载<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="loadAmericanStateJson">美国州边界Json</a></li>
                            <li><a href="#" id="loadChinaProvinceJson">中国省市Json</a></li>
                            <li class="divider"></li>
                            <li><a href="#" id="clearAllVectorData">清除矢量数据</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<!--提示框-->
<div class="tipPanel" id="tipPanel">
    <div class="panel panel-info">
        <div class="panel-heading" style="display: flex;">
            <h3 class="panel-title">当前模块：</h3>
            <button type="button" class="close" style="position: absolute; right: 5%;" id="tipClose">&times;</button>
        </div>
        <div class="panel-body" id="tipBody">
        </div>
    </div>
</div>

<!--gis核心库-->
<script src="libs/Cesium/Cesium.js"></script>
<script src="libs/popup.js"></script>
<script src="libs/requirejs-2.1.20/require.min.js" data-main="js/app"></script>
</body>
</html>